<template>
	<div id="consumerDetail">
		<!--<haders title="我的消费明细"></haders>-->
		<scroller ref="scroller" :on-infinite="infinite">
			<div class="mian">
				<ul class="consumer">
					 <p class="sumer_p">明细</p>
					 <li class="sumerUser" v-for="item in items">
					 	<p><span>{{item.texts}}</span><span>{{item.pic}}</span></p>
					 	<p><span>{{item.tiems}}</span></p>
					 </li>
				</ul>
				<!--没有数据时-->
				<no-data v-if="items==0" title="还没有您的足迹~~~"></no-data>

			</div>
		</scroller>
	</div>
</template>
<script>
	export default {
		name: 'consumerDetail',
		components: {

		},
		data() {
			return {
				indexPage: 1, //请求页面索引
				items: [{
						 texts:'购买商品',
						 pic:'-120.00',
						 tiems:'2017-10-1 10:10'
					},
					{
						 texts:'购买商品',
						 pic:'-120.00',
						 tiems:'2017-10-1 10:10'
					},
					{
						 texts:'购买商品',
						 pic:'-120.00',
						 tiems:'2017-10-1 10:10'
					}
				]
			}
		},
		mounted() {
			this.top = 1
			this.bottom = 10
		},
		methods: {
			//模拟数据
			infinite(done) {
				if(this.bottom >= 30) {
					setTimeout(() => {
						done(true)
					}, 1500)
					return;
				}
				setTimeout(() => {
					let start = this.bottom + 1;
					for(let i = start; i < start + 10; i++) {
						this.items.push({
							texts:'购买商品'+i,
							 pic:'-120.00',
							 tiems:'2017-10-1 10:10'
						})
					}
					this.bottom = this.bottom + 10;
					setTimeout(() => {
						done()
					})
				}, 1500)
			},
			//真实请求数据调用
			/*infinite(done){
			 let	_this=this;
			 this.done=done;
			 _this.$http.post().then((res) => {
			 		if(res===null) return done(true);
			 		_this.indexPage++;
			 		_this.items=_this.items.concat(res.data);
			 		done();
			 });
			}*/
		}
	}
</script>

<style scoped>
	.consumer{
		width: 100%;
	}
	.consumer .sumer_p{
		padding: 0.2rem 0.3rem;
		font-size: 0.4rem;
		border-bottom: 1px solid #CCCCCC;
	}
	
	.consumer .sumerUser{
		padding: 0.2rem 0.3rem;
		background-color:#fff;
		font-size: 0.346666rem;
		border-bottom: 1px solid  #CCCCCC;
	}
	.sumerUser p{
		padding: 0.2rem 0;
		display: flex;
		justify-content: space-between;
	}
	
	
	


</style>